import { ElMessage } from "element-plus";
import { useCanvasStoreHook } from "@/stores/modules/canvas";
import { useSelectGraphStoreHook } from "@/stores/modules/selectGraph";
import { useKBStoreHook } from "@/stores/modules/KB";
import { uniqueFunc } from "@/utils/index";
import { graph } from "@/views/associationAnalysis/canvas/components/canvasG6/common/index";
import { isNeedStop } from "@/views/associationAnalysis/canvas/components/canvasG6/common/menuEvent";
import useCanvas from "@/hooks/canvas/useCanvas";

// 方法
import { emitter } from "@/utils/mitt";
import { fetchExpansion } from "@/api/associationAnalysis";

const useCanvasStore = useCanvasStoreHook();
// 新增画布标签页
export const handleNewCanvas = () => {
  const uuid = `${Date.now()}`;
  useCanvasStore.pushCanvas({
    uuid,
    name: `临时文件${uuid}`,
    data: {
      nodes: [],
      edges: [],
    },
  });
};

// 保存事件
export const handleSave = () => {
  // 利用组件通讯，给 canvasG6 组件传递保存事件
  emitter.emit("handleSave");
};

// 一键扩展
export const handleExpandFn = async () => {
  const useKBStore = useKBStoreHook();
  const useSelectGraphStore = useSelectGraphStoreHook();
  const selectCanvas = useSelectGraphStore.getSelectCanvas();
  let vertexes = [];

  if (selectCanvas && selectCanvas.nodes.length) {
    vertexes = selectCanvas.nodes.map((item) => {
      return {
        tags: item.tags.map((item) => item.name),
        vid: item.vid,
      };
    });
  } else {
    // 获取所有的点
    // vertexes = useCanvasStore.getCanvasByData().nodes.map((item) => {
    //   return {
    //     tags: item.tags.map((item) => item.name),
    //     vid: item.vid,
    //   };
    // });
  }
  const params = {
    step: 1,
    vertexes,
  };
  if (!vertexes.length) return ElMessage("暂无可拓展的节点");
  const res1 = await fetchExpansion(params);
  const data = {
    nodes: [],
    edges: [],
  };
  data.edges = res1.relations.map((item, index) => {
    return {
      ...item,
      id: `${item.srcID}_${item.dstID}_${item.code}_${item.rank}`,
      label: useKBStore.getTagEdgesByName(item.edgeName),
      target: item.dstID, // 目标点 id
      source: item.srcID, // 起始点 id
    };
  });
  data.nodes = res1.vertexes.map((item, index) => {
    return {
      ...item,
      id: item.vid,
      label: getSysName(item.tags),
    };
  });

  // data.nodes = data.nodes.concat(useCanvasStore.getCanvasByData().nodes);
  data.edges = uniqueFunc(
    // 去除id相同的边
    data.edges.concat(useCanvasStore.getCanvasByData().edges)
  );
  data.nodes = useCanvas(data.nodes, useCanvasStore.getCanvasByData()).nodes;
  // console.log(data.edges, "data.edges");
  // useCanvasStore.setCanvasEdges(data.edges); // 边添加到画布
  // useCanvasStore.setCanvasData(data.nodes); // 节点添加到画布
  // graph.changeData(data);
  // sessionStorage.setItem("graphIsEdit", true); // 标记是否有未保存的数据

  isNeedStop.value = true; // 阻止画布重新渲染，防止后退失效
  graph.changeData(data); // 更新画布，添加撤销操作栈
  useCanvasStore.setCanvas(JSON.parse(JSON.stringify(data)));

  useSelectGraphStore.setSelectCanvas(null);
  // sessionStorage.setItem("graphIsEdit", true); // 标记是否有未保存的数据
};

// 搜索结果获取sysName值
const getSysName = (tags) => {
  let sysName = "";
  tags.forEach((item) => {
    if (item.properties.sys_name) {
      sysName = item.properties.sys_name;
    }
  });
  return sysName;
};

const handle = () => {
  ElMessage("开发中");
};

export const actionOption = [
  {
    label: "文件",
    svg: "icon_file_fill",
    children: [
      {
        label: "新建",
        svg: "icon_newfile_fill",
        handle: handleNewCanvas,
      },
      {
        label: "打开",
        svg: "icon_open_fill",
        handle: () => {
          emitter.emit("handleFileShow", "fileDialogShow");
        },
      },
      {
        label: "导入",
        svg: "icon_leadingin_fill",
        handle: () => {
          // const fileInput = document.getElementById("fileInput") as HTMLElement;
          // if (fileInput) fileInput.click();
          emitter.emit("handleFileShow", "fileImportDialogShow");
        },
      },
      {
        label: "保存",
        svg: "icon_save_fill",
        handle: handleSave,
      },
    ],
  },
  {
    label: "选择",
    svg: "icon_select_fill",
    children: [
      {
        label: "移动",
        svg: "icon_move_fill",
        handle: () => {
          emitter.emit("handleSelect", "drag-canvas");
        },
      },
      {
        label: "框选",
        svg: "icon_kuangxuan",
        handle: () => {
          emitter.emit("handleSelect", "brush-select");
        },
      },
      {
        label: "圆选",
        svg: "icon_yuanxuan_fill",
        handle: () => {
          emitter.emit("handleSelect", "lasso-select");
        },
      },
      {
        label: "全选",
        svg: "icon_quanxuan_fill",
        handle: () => {
          emitter.emit("handleAllSelect");
        },
      },
      {
        label: "反选",
        svg: "icon_fanxuan_fill",
        handle: () => {
          emitter.emit("handleInvert");
        },
      },
    ],
  },
  {
    label: "布局",
    svg: "icon_layout_fill",
    children: [
      {
        label: "力导向图",
        svg: "icon_graphView_fill",
        handle: () => {
          emitter.emit("handleChangeLayout", "force");
        },
      },
      {
        label: "层次图",
        svg: "icon_treeView_fill",
        handle: () => {
          emitter.emit("handleChangeLayout", "dagre");
        },
      },
      {
        label: "水平层次图",
        svg: "icon_treeView_level_fill",
        handle: () => {
          emitter.emit("handleChangeLayout", "dagre-lr");
        },
      },
      {
        label: "环形图",
        svg: "icon_sphereView_fill",
        handle: () => {
          emitter.emit("handleChangeLayout", "circular");
        },
      },
      {
        label: "网格",
        svg: "icon_gridView_fill",
        handle: () => {
          emitter.emit("handleChangeLayout", "grid");
        },
      },
      {
        label: "同心圆",
        svg: "icon_Radial_fill",
        handle: () => {
          emitter.emit("handleChangeLayout", "concentric");
        },
      },
      {
        label: "辐射",
        svg: "icon_relations_fill",
        handle: () => {
          emitter.emit("handleChangeLayout", "radial");
        },
      },
    ],
  },
  {
    label: "操作",
    svg: "icon_operate_fill",
    children: [
      {
        label: "居中",
        svg: "icon_juzhong_fill",
        handle: () => {
          emitter.emit("toolbarEvent", "juzhong");
        },
      },
      {
        label: "撤销",
        svg: "icon_chexiao_fill",
        handle: () => {
          emitter.emit("toolbarEvent", "chexiao");
        },
      },
      {
        label: "恢复",
        svg: "icon_chongzuo_fill",
        handle: () => {
          emitter.emit("toolbarEvent", "huifu");
        },
      },
      // {
      //   label: "刷新",
      //   svg: "icon_refresh_fill",
      //   handle,
      // },
      // {
      //   label: "合并",
      //   svg: "icon_hebing_fill",
      //   handle,
      // },
      {
        label: "锁定",
        svg: "icon_lock_fill",
        handle: () => {
          emitter.emit("lockChangeEvent", "lock");
        },
      },
      {
        label: "解锁",
        svg: "icon_unlock_fill",
        handle: () => {
          emitter.emit("lockChangeEvent", "unlock");
        },
      },
    ],
  },
  {
    label: "标注",
    svg: "icon_biaozhu_fill",
    children: [
      {
        label: "增加标注",
        svg: "icon_zengjiabiaozhu-fill",
        handle: () => {
          emitter.emit("dimensionEvent", "add");
        },
      },
      {
        label: "取消标注",
        svg: "icon_quxiaobiaozhu_fill",
        handle: () => {
          emitter.emit("dimensionEvent", "cancle");
        },
      },
    ],
  },
  {
    label: "导出",
    svg: "icon_select_fill",
    children: [
      {
        label: "导出文件",
        svg: "icon_select_fill",
        handle: () => {
          emitter.emit("handleExportData");
        },
      },
      {
        label: "导出截图",
        svg: "icon_quxiaobiaozhu_fill",
        handle: () => {
          emitter.emit("handleExportImage");
        },
      },
    ],
  },
  {
    label: "关系",
    svg: "icon_guanxi_fill",
    children: [
      {
        label: "一键拓展",
        svg: "icon_yijiantuozhan_fill",
        handle: handleExpandFn,
      },
      {
        label: "关系拓展",
        svg: "icon_guanxituozhan_fill",
        handle: () => {
          emitter.emit("handleRelationshipExpansion");
        },
      },
    ],
  },
  {
    label: "查询",
    svg: "icon_chaxun_fill",
    children: [
      {
        label: "群体分析",
        svg: "icon_qunti_fill",
        handle,
      },
      {
        label: "共同邻居分析",
        svg: "icon_gongtonglinju_fill",
        handle,
      },
      {
        label: "血缘分析",
        svg: "icon_xueyuan_fill",
        handle,
      },
      {
        label: "路径分析",
        svg: "icon_lujing_fill",
        handle: () => {
          emitter.emit("showDrawer", {
            name: "路径分析",
            type: "lujing",
          });
        },
      },
      {
        label: "骨干分析",
        svg: "icon_gugan_fill",
        handle,
      },
      {
        label: "亲密度分析",
        svg: "icon_qinmidu_fill",
        handle,
      },
    ],
  },
  {
    label: "网络",
    svg: "icon_wangluo_fill",
    children: [
      {
        label: "节点重要性分析",
        svg: "icon_weizhi_fill",
        handle: () => {
          emitter.emit("showDrawer", {
            name: "节点重要性分析",
            type: "nodeImportant",
          });
        },
      },
      {
        label: "社区发现分析",
        svg: "icon_huodongjinmidu_fill",
        handle: () => {
          emitter.emit("showDrawer", {
            name: "社区发现分析",
            type: "community",
          });
        },
      },
      {
        label: "关系紧密度分析",
        svg: "icon_guanxijinmidu_fill",
        handle,
      },
      // {
      //   label: "活动紧密度分析",
      //   svg: "icon_huodongjinmidu_fill",
      //   handle,
      // },
      {
        label: "数据流向分析",
        svg: "icon_shujuliuxiang_fill",
        handle,
      },
    ],
  },
  {
    label: "同类",
    svg: "icon_tonglei_fill",
    children: [
      {
        label: "类案分析",
        svg: "icon_leian_fill",
        handle: () => {
          emitter.emit("leianEvent");
        },
      },
    ],
  },
];
